<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>User Management</title>
	<style>
		.userInfoWrapper {
			float: left;
			width: 100%;
			/* background: yellow; */
		}

		.userListContainer {
			float: left;
			margin-left: -300px;
			width: 300px;
			/* background-color: red; */
		}

		.userInfo {
			padding-top: 50px;
			margin-right: 310px;
			/* background-color: green; */
		}

		.label {
			display: inline-block;
			text-align: right;
			padding-right: 15px;
			width: 300px;
		}

		.userInfo div {
			text-align: center;
			margin-top: 15px;
			min-width: 500px;
		}

		.userInfo input, .userInfo .label {
			font-size: 1.5em;
		}

		input[type="button"] {
			background-image: -webkit-linear-gradient(top, #444, #999);
			background-image: -moz-linear-gradient(top, #444, #999);
			background-image: -ms-linear-gradient(top, #444, #999);
			background-image: -o-linear-gradient(top, #444, #999);
			background-image: linear-gradient(top, #444, #999);
			font-size: 1em;
			height: 50px;
			width: 100px;
		}

		.userList {
			padding-left: 0;
			margin-left: 0;
			list-style-type: none;
		}

		.userList li {
			padding: 5px 10px 5px 10px;
			border: dashed 1px #777;
			border-bottom: none;
		}

		.userList li:last-of-type {
			border-bottom: dashed 1px #777;
		}

		.userList li:hover {
			background-color: #BBB;
			cursor: hand;
		}

		.userList li span {
			display: inline-block;
		}

		.userList li :first-child {
			width: 239px;
		}

	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="/sopaths/resources/js/knockout-3.0.0.js"></script>
	<script>
		function UserListViewModel() {
			var self = this;

			self.userList = ko.observableArray();

			self.loadUser = function(data) {
				$.getJSON("detail", {id: data.id}, function(data, statusText, jqHXR) {
					userViewModel.assemble(data);
				});
			};

			self.deleteUser = function(data) {
				$.getJSON("delete", {id: data.id}, function(data, statusText, jqXHR) {
					alert("delete user: " + statusText);
				});
			}
		}

		var userListViewModel = null;
		var userViewModel = null;

		$(function() {
			userViewModel = new UserViewModel();
			ko.applyBindings(userViewModel, $(".userInfo").get(0));
			userListViewModel = new UserListViewModel();
			ko.applyBindings(userListViewModel, $(".userList").get(0));
			$.getJSON("list", function(data, textStatus, jqHXR) {
				for (var index in data) {
					userListViewModel.userList.push(data[index]);
				}
			});
		});

		function UserViewModel() {
			var self = this;

			var id = "";

			self.username = ko.observable("");

			self.password = ko.observable("");

			self.retypePassword = ko.observable("");

			self.email = ko.observable("");

			self.address = ko.observable("");

			self.reset = function() {
				self.username("");
				self.password("");
				self.retypePassword("");
				self.email("");
				self.address("");
			}

			self.addUser = function() {
				$.ajax("add", {
					type: 'POST',
					dataType: 'json',
					contentType: 'application/json; charset=UTF-8',
					data: JSON.stringify(self.getObj()),
					success: function(data, textStatus, jqHXR) {
						alert(textStatus);
					}
				});
			}

			self.getObj = function() {
				return {
					id: id,
					username: this.username(),
					password: this.password(),
					email: this.email(),
					address: this.address()
				};
			}

			self.assemble = function(user) {
				id = user.id;
				self.username(user.username);
				self.password(user.password);
				self.retypePassword(user.password);
				self.email(user.email);
				self.address(user.address);
			}
		}
	</script>
</head>
<body>
	<div class="main">
		<div class="userInfoWrapper">
			<div class="userInfo">
				<div>
					<label for="username" class="label">What's your name?</label>
					<input type="text" id="username" data-bind="value: username" />
				</div>
				<div>
					<label for="password" class="label">Enter your password</label>
					<input type="text" id="password" data-bind="value: password" />
				</div>
				<div>
					<label for="retypePassword" class="label">Re-enter your password</label>
					<input type="text" id="retypePassword" data-bind="value: retypePassword" />
				</div>
				<div>
					<label for="email" class="label">What's your email address?</label>
					<input type="text" id="email" data-bind="value: email" />
				</div>
				<div>
					<label for="address" class="label">Where do you live?</label>
					<input type="text" id="address" data-bind="value: address" />
				</div>
				<div>
					<input type="button" value="Submit" data-bind="click: addUser" />
					<input type="button" value="Reset" data-bind="click: reset" />
				</div>
			</div>
		</div>
		<div class="userListContainer">
			<ul class="userList" data-bind="foreach: userList">
				<li>
					<span data-bind="text: username, click: $parent.loadUser"></span><span data-bind="click: $parent.deleteUser">Delete</span>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>